<template>
  <!-- 共享设置 -->
  <div class="sharing-settings">
    <el-dialog
      :title="$t('tool.modelManage.sharingSetting')"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-position="top">
        <el-form-item
          :label="$t('tool.modelManage.sharingMethod')"
          prop="shareType"
        >
          <el-select
            v-model="form.shareType"
            style="width: 100%"
            class="jtyj-select"
            :placeholder="$t('tool.others.placehoderSelect')"
            @change="handleChangeVisible"
          >
            <el-option
              v-for="item in sharingMethodsOptions"
              :key="item.value"
              :label="$t('tool.modelManage.' + item.i18nName)"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="form.shareType != 0 && form.shareType != 1">
          <el-form-item style="display: flex; justify-content: flex-start">
            <el-button type="primary" @click="openSetAccount">{{
              $t("tool.modelManage.accountSetting")
            }}</el-button>
          </el-form-item>
          <el-table
            :data="form.userList"
            border
            style="width: 100%; margin-top: 5px"
          >
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="userName" label="账户名称">
            </el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="jtyj-btn-cancel" @click="cancel">{{
          $t("setup.buttonText.cancel")
        }}</el-button>
        <el-button class="jtyj-btn-primary" @click="submitForm">{{
          $t("setup.buttonText.save")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 点击账户设置，打开账户列表选择 -->
    <el-dialog
      :title="$t('tool.modelManage.accountSetting')"
      :visible.sync="isSetAccount"
      :close-on-click-modal="false"
      width="40vw"
      @close="handleClose"
    >
      <el-table
        :key="new Date().getTime()"
        ref="tableRef"
        row-key="userId"
        :data="accountList"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%; margin-top: 5px"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="userName" label="账户名称"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button class="jtyj-btn-cancel" @click="isSetAccount = false">{{
          $t("setup.buttonText.cancel")
        }}</el-button> -->
        <el-button class="jtyj-btn-primary" @click="submitAccount">{{
          $t("setup.buttonText.confirm")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSelectedUsersList,
  getShareAccountList,
  addModelShare,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,
      isSetAccount: false, // 控制是否显示设置账户弹框
      form: {},
      modelInfo: {},
      multipleSelection: [], // 当前勾选的用户列表
      accountList: [],
    };
  },
  props: {
    info: {
      type: Object,
    },
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
      sharingMethodsOptions: (state) =>
        state.modelManageTool.sharingMethodsOptions,
    }),
  },
  methods: {
    init() {
      this.dialogFormVisible = true;
      this.modelInfo = this.info;
      this.reset(this.info);
      this.getShareAccountList();
      if (this.modelInfo.shareType == 2 || this.modelInfo.shareType == 3) {
        this.getSelectedUsersList();
      }
    },
    // 获取已选择的账户列表
    getSelectedUsersList() {
      getSelectedUsersList({ modelId: this.modelInfo.modelId }).then(
        (response) => {
          if (response.code == 200) {
            if (Array.isArray(response.data)) {
              this.form.userList = response.data.map((item) => ({
                userName: item.userName,
                userId: item.userId,
              }));
            }
          }
        }
      );
    },
    // 获取可选择的共享账户列表
    getShareAccountList() {
      getShareAccountList({ userId: this.userId }).then((response) => {
        if (response.code == 200) {
          if (Array.isArray(response.rows)) {
            this.accountList = response.rows.map((item) => ({
              userName: item.userName,
              userId: item.userId,
            }));
          }
        }
      });
    },
    handleChangeVisible(val) {
      this.form.userList = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reset(modelInfo) {
      this.form = {
        shareType: modelInfo.shareType,
        userList: [],
      };
      this.resetForm("form");
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    handleClose() {
      this.$refs.tableRef.clearSelection();
      this.isSetAccount = false;
    },
    openSetAccount() {
      this.isSetAccount = true;
      this.multipleSelection = this.form.userList;
      this.$nextTick(() => {
        this.accountList.forEach((ele) => {
          if (
            this.multipleSelection.filter(
              (element) => element.userId == ele.userId
            ).length > 0
          ) {
            this.$refs.tableRef.toggleRowSelection(ele);
          }
        });
      });
    },
    submitAccount() {
      this.form.userList = this.multipleSelection;
      this.isSetAccount = false;
    },
    submitForm() {
      addModelShare({
        id: this.modelInfo.modelId,
        shareType: this.form.shareType,
        userIds: this.form.userList.map((item) => item.userId),
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.$emit("refresh");
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>

<style>
</style>